<template>
  <div class="w-full overflow-y-scroll h-[700px]">
    <div class="w-full flex">
      <div class="mt-[80px] w-11/12 m-auto">
        <div
          v-for="(item, index) in orderData"
          :key="index"
          class="border-2 border-[#fdc14b] mb-[38px] 2xl:text-[30px] rrrounded-lg w-full scrollbar-demo-item"
        >
          <p class="sm:m-1 2xl:ml-[40px] 2xl:mt-[30px] 2xl:mb-[16px]">
            商家名称：{{ item.shopname }}
          </p>
          <div class="flex">
            <img :src="item.img" alt="" class="w-1/5 sm:m-1 2xl:ml-[40px]" />
            <div class="">
              <p class="mt-[2%]">下单时间：{{ item.ordertime }}</p>
              <p class="mt-[2%]">总价：￥{{ item.price }}</p>
            </div>
          </div>
          <div class="flex justify-between">
            <button class="p-1 px-2 xl:ml-[10%]">更多</button>
            <div class="p-1 px-2">
              <button class="border-2 border-zinc-500 rounded-full mr-2 px-4">
                评价
              </button>
              <button class="border-2 border-[#fdc14b] rounded-full px-2">
                再来一单
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
let head1 = reactive([
  { title: "首页" },
  { title: "分类" },
  { title: "收藏" },
  { title: "订单" },
]);
let orderData = reactive([
  {
    id: 0,
    title: "凉拌脆皮毛肚",
    img: "https://i.postimg.cc/XqZhyjZ2/2.png",
    shopname: "川式凉菜馆",
    ordertime: "2023/05/09",
    orderid: "1433223",
    price: "105.00",
    Pickupcode: "01",
  },
  {
    id: 1,
    title: "铁板牛排",
    img: "https://i.postimg.cc/5t41ZJzy/2.png",
    shopname: "中式西餐厅",
    ordertime: "2023/05/09",
    orderid: "1433224",
    price: "110.00",
    Pickupcode: "02",
  },
  {
    id: 0,
    title: "凉拌脆皮毛肚",
    img: "https://i.postimg.cc/XqZhyjZ2/2.png",
    shopname: "川式凉菜馆",
    ordertime: "2023/05/09",
    orderid: "1433223",
    price: "105.00",
    Pickupcode: "01",
  },
  {
    id: 1,
    title: "铁板牛排",
    img: "https://i.postimg.cc/5t41ZJzy/2.png",
    shopname: "中式西餐厅",
    ordertime: "2023/05/09",
    orderid: "1433224",
    price: "110.00",
    Pickupcode: "02",
  },
]);
const router = useRouter();
function toDerails(item) {
  router.push({
    name: "details",
    query: {
      id: JSON.stringify(item),
    },
  });
}
</script>
<style scoped></style>
